<template>
    <view class="lazy-image-wrap " @click="click">
        <image
            class="actual-image "
            :style="[imageStyle]"
            :class="{ actualImageShow: showActualImage}"
            :mode="mode"
            :src="showActualImage ? src : ''"
        ></image>
        <view class="active-border" :class="{ showBorder: isActive}" :style="[imageStyle]" ></view>
        <image v-if="!showActualImage" class="lazy-image" mode="scaleToFill" :src="src" @load="load" @error="imageError"></image>
        <view v-if="!showActualImage" class="default-box" :style="[imageStyle, { backgroundColor: getRandomBgColor }]">
            <view class="loader-box">
                <view class="loader"><view class="loader-inner"></view></view>
            </view>
        </view>
    </view>
</template>
<script>
function random(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}
export default {
    name: '',
    data() {
        return {
            showActualImage: false,
            errImagePath: ''
        };
    },
    props: {
        src: {
            type: String,
            default: ''
        },
        mode: {
            type: String,
            default: 'scaleToFill'
        },
        imageStyle: {
            type: Object,
            default: function() {
                return {
                    width: '100%',
                    height: '100%'
                };
            }
        },
        isActive: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        getRandomBgColor() {
            return 'rgb(' + random(200, 240) + ',' + random(200, 240) + ',' + random(200, 240) + ')';
        }
    },
    mounted() {},
    onLoad() {},
    onShow() {},
    methods: {
        load() {
            this.showActualImage = true;
        },
        click(){
            this.$emit('click')
        },
        imageError(){
            
        }
    },
    watch: {},
    components: {},
    onShareAppMessage(res) {
        return {};
    }
};
</script>
<style lang="scss">
.lazy-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    // overflow: hidden;
    .lazy-image {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 20000rpx;
        top: -2000rpx;
    }
    .actual-image {
        position: relative;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: all 0.8s ease;
    }
    .actualImageShow {
        opacity: 1;
    }
    .default-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .active-border {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%,-50%);
        box-sizing: border-box;
        border: 6rpx solid #20bf64;
        z-index: 16;
        transition: all ease 0.5s; 
        opacity: 0;
    }
    .showBorder{
        opacity: 1;
    }
}

.loader-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16%;
    height: 0;
    padding-top: 16%;
    box-sizing: border-box;
    z-index: 2;
}
.loader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 4rpx solid #fff;
    box-sizing: border-box;
    animation: loader 2s infinite ease;
}

.loader-inner {
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}
</style>
